<template>
    <el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.rows"
        :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" background
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" style="margin-top: 20px;" />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"
import { defineProps, defineEmits } from "vue"
const size = ref<ComponentSize>('default')
const disabled = ref(false)
const props = defineProps({
    total: {
        type: Number,
        default: 0
    },
    pageParams: {
        type: Object
    }
})
// 子传父
const emit = defineEmits(['sizeChange', 'currentChange'])
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    emit("sizeChange", val)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    emit("currentChange", val)
}
</script>